<template>
    <div>
        <Card>
            <!-- search start -->
            <div class="search_div">
                <div class="add">
                    <Button v-if="role < 3 " size="default" icon="md-add" type="primary" @click="add">新增区域</Button>
                </div>

                <Form :model="search" class="search_box" inline label-position="right">

                    <FormItem label="分部 -> 楼层：">
                        <Cascader class="cascader" :value="cascadeArr" :data="cascadeList" change-on-select @on-change="cascadeSelection" :clearable="false"></Cascader>
                    </FormItem>

                    <FormItem>
                        <Button icon="md-search" type="primary" @click="searchList">搜索</Button>
                    </FormItem>
                </Form>
            </div> <!-- end search -->

            <Table ref="table" :loading="loading" stripe :columns="columns1" :data="data1"></Table>
            <Page :total="total" :current="search.page" show-sizer show-total :page-size="search.rows" @on-page-size-change="getListByPageSize" @on-change="getListByPageNum"> </Page>
        </Card>

        <!-- modalAdd start -->
        <Modal v-model="modal" :title=" formItem.regionid? '修改区域':'新增区域'" :mask-closable="false" @on-cancel="close">
            <Form :label-width="140" :model="formItem">

                <FormItem label="所属分部：">
                    <Select class="branchSelect" v-model="formItem.branchid" @on-change="branchSelection">
                        <Option v-for="item in cascadeList2 " :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </FormItem>

                <FormItem label="所属楼层：">
                    <Select class="branchSelect" v-model="formItem.floorid" :disabled=" formItem.floorid? false:isDisabled">
                        <Option v-for="item in floors " :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </FormItem>

                <FormItem v-if="!formItem.regionid" label="区域名称：">
                    <Checkbox :value="checkAll" @click.prevent.native="handleCheckAll">全选</Checkbox>
                    <CheckboxGroup v-model="checkGroup" @on-change="checkAllGroupChange">
                        <Checkbox v-for="item in areaList" :key="item.id" :label=" JSON.stringify(item)"> {{ item.name }} </Checkbox>
                    </CheckboxGroup>
                </FormItem>

                <FormItem v-else label="区域名称：">
                    <Input v-model="formItem.name" style="width:15vw"></Input>
                </FormItem>

                <FormItem v-if="formItem.regionid" label="顺序：">
                    <Input v-model="formItem.sort" style="width:15vw"></Input>
                </FormItem>

                <FormItem v-if="formItem.regionid" label="巡店工位/办公室：">
                    <RadioGroup v-model="formItem.is_cp_ws">
                        <Radio :label="0">否</Radio>
                        <Radio :label="1">是</Radio>
                    </RadioGroup>
                </FormItem>


            </Form>
            <footer class="modalFooter" slot="footer">
                <Button type="default" @click="close">取消</Button>
                <Button type="primary" @click="save">保存</Button>
            </footer>
        </Modal>
    </div>
</template>
<script>
    import {
        mapMutations,
        mapGetters
    } from 'vuex'
    import axios from '@/libs/api.request'
    export default {
        name: 'area-page',
        data() {
            return {

                // 是否全选
                checkAll: false,

                // 选中数组
                checkGroup: [],

                // 区域字典
                areaList: [],

                // 级联回显数组
                cascadeArr: [-1],

                // 模态框状态
                modal: false,

                // 是否禁用楼层选择
                isDisabled: true,

                parentItem: {},

                // 新增/修改对象
                formItem: {
                    branchid: '',
                    floorid: '',
                    r_data: []
                },

                // 加载状态
                loading: false,

                // 级联列表
                // cascadeList: [], //有全部
                cascadeList2: [], //无全部
                // 楼层列表
                floors: [],

                // 搜索对象
                search: {
                    branchid: -1,
                    floorid: -1,
                    page: 1,
                    rows: 10
                },

                // 数据总条数
                total: 0,

                // 区域列表
                columns1: [{
                        type: 'index',
                        align: 'center',
                        width: 60
                    },
                    {
                        title: '区域名称',
                        align: 'center',
                        key: 'name'
                    },
                    {
                        title: '当前楼层',
                        align: 'center',
                        key: 'floor_zw'
                    },
                    {
                        title: '当前分部',
                        align: 'center',
                        key: 'branch_zw'
                    },
                    {
                        title: '是否巡店工位/办公室',
                        align: 'center',
                        key: 'is_cp_ws_zw'
                    },
                    {
                        key: 'action',
                        width: 500,
                        align: 'right',
                        renderHeader: (h) => {
                            return h('div', {
                                style: {
                                    width: 420 + 'px',
                                    textAlign: 'center'
                                }
                            }, '操作')
                        },
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'default',
                                        icon: 'ios-eye',
                                        disabled: params.row.is_cp_ws == 0
                                    },
                                    style: {
                                        display: params.row.is_cp_ws == 0 ? 'none' : 'inline-block',
                                        marginRight: '14px',
                                        height: '30px'
                                    },
                                    on: {
                                        click: () => {
                                            this.myClose('workstation-team')
                                            this.$_changePage('workstation-team', '工位/办公室管理', {
                                                branchid: params.row.branchid,
                                                floorid: params.row.floorid,
                                                regionid: params.row.id
                                            })
                                        }
                                    }
                                }, '查看 工位/办公室'),
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'default',
                                        icon: 'ios-eye'
                                    },
                                    style: {
                                        marginRight: '14px',
                                        height: '30px'
                                    },
                                    on: {
                                        click: () => {
                                            this.myClose('module-page')
                                            this.$_changePage('module-page', '模块管理', {
                                                branchid: params.row.branchid,
                                                floorid: params.row.floorid,
                                                regionid: params.row.id
                                            })
                                        }
                                    }
                                }, '查看模块'),
                                h('Button', {
                                    props: {
                                        type: 'warning',
                                        size: 'default',
                                        icon: 'md-brush',
                                        disabled: this.role > 2
                                    },
                                    style: {
                                        marginRight: '14px',
                                        width: '80px',
                                        height: '30px'
                                    },
                                    on: {
                                        click: () => {
                                            if (this.role > 2) {
                                                return false
                                            }
                                            let branchid = params.row.branchid
                                            this.formItem = {
                                                name: params.row.name,
                                                branchid: branchid,
                                                floorid: params.row.floorid,
                                                regionid: params.row.id,
                                                is_cp_ws: params.row.is_cp_ws,
                                                sort: params.row.sort
                                            }

                                            // 所属分部对应的楼层列表
                                            this.cascadeList2.forEach((item) => {
                                                if (item.value == branchid) {
                                                    this.floors = item.children
                                                }
                                            })
                                            this.modal = true
                                        }
                                    }
                                }, '编辑'),
                                h('Poptip', {
                                        props: {
                                            confirm: true,
                                            title: '你确定要删除吗?',
                                            placement: 'top',
                                            transfer: true,
                                        },
                                        on: {
                                            'on-ok': () => {
                                                if (this.role > 2) {
                                                    return false
                                                }
                                                this.deleteAreaByid(params.row.id)
                                            }
                                        }
                                    },
                                    [h(
                                        'Button', {
                                            props: {
                                                type: 'error',
                                                size: 'default',
                                                icon: 'ios-trash',
                                                disabled: this.role > 2
                                            },
                                            style: {
                                                marginRight: '14px',
                                                width: '80px',
                                                height: '30px'
                                            }
                                        },
                                        '删除'
                                    )]
                                )
                            ])
                        }
                    }

                ],
                // 区域数据
                data1: []

            }
        },
        methods: {
            ...mapMutations(['myClose']),
            ...mapGetters(['getBranchList', 'getRole']),

            // 级联选择
            cascadeSelection(value) {
                if (value.length == 1) {
                    this.search.branchid = value[0]
                    this.search.floorid = -1
                    return false
                }
                this.search.branchid = value[0]
                this.search.floorid = value[1]
            },

            // 所属分部选择
            branchSelection(value) {
                if (value) {
                    // 所属分部对应的楼层列表
                    this.cascadeList2.forEach((item) => {
                        if (item.value == value) {
                            this.floors = item.children
                        }
                    })
                    this.isDisabled = false
                }
            },

            // 获取区域
            getArea() {
                this.loading = true
                let {
                    ...data
                } = this.search
                axios.ajax_post('admin-region-ajax_get_region', data).then(res => {
                    this.loading = false
                    if (res.data.code === 1) {
                        this.data1 = res.data.data.list
                        this.total = res.data.data.total_num

                        if (this.data1.length < 1 && this.total > 0) {
                            this.search.page = Math.ceil(this.total / this.search.rows)
                            this.getArea()
                        }

                    } else {
                        this.$Notice.error({
                            title: res.data.msg,
                            duration: 3
                        })
                    }
                })
            },

            // 获取区域字典
            getAreaList() {
                axios.ajax_post('admin-region_dict-ajax_get_public_region_dict', {}).then(res => {
                    if (res.data.code === 1) {
                        this.areaList = res.data.data.list
                    } else {
                        this.$Notice.error({
                            title: res.data.msg,
                            duration: 3
                        })
                    }
                })
            },

            // 全选
            handleCheckAll() {
                this.checkAll = !this.checkAll
                if (this.checkAll) {
                    this.formItem.r_data = []
                    this.areaList.forEach(item => {
                        let itemArr = item
                        delete itemArr.id
                        this.formItem.r_data.push(itemArr)
                        this.checkGroup.push(JSON.stringify(item))
                    })
                } else {
                    this.checkGroup = []
                }

            },

            // 单选
            checkAllGroupChange(e) {
                this.formItem.r_data = []
                e.forEach(item => {
                    item = JSON.parse(item)
                    delete item.id
                    this.formItem.r_data.push(item)
                })
                if (e.length === this.areaList.length) {
                    this.checkAll = true
                } else {
                    this.checkAll = false
                }
            },

            // 新增
            add() {
                this.getAreaList()

                // 清空全选
                this.checkAll = false

                // 清空选中数组
                this.checkGroup = []
                this.formItem = this.parentItem
                this.modal = true
            },

            // 搜索
            searchList() {
                this.search.page = 1
                this.search.rows = 10
                this.getArea()
            },

            // 保存
            save() {
                let data = this.formItem
                if (!data.branchid) {
                    this.$Message.error('请选择楼层所属分部 !');
                    return false
                }
                if (!data.floorid) {
                    this.$Message.error('请选择区域所属楼层 !');
                    return false
                }
                let url = 'admin-region-ajax_add_region'
                // 判断新增or修改
                if (data.regionid) {
                    if (!data.name) {
                        this.$Message.error('请输入区域名称 !');
                        return false
                    }
                    url = 'admin-region-ajax_save_region'
                } else {
                    this.parentItem = this.formItem
                }
                axios.ajax_post(url, data).then(res => {
                    if (res.data.code === 1) {
                        this.$Notice.success({
                            title: res.data.msg,
                            duration: 3
                        })
                        this.modal = false
                        this.getArea()
                        // 楼层选择禁用
                        // this.isDisabled = true
                    } else {
                        this.$Notice.error({
                            title: res.data.msg,
                            duration: 3
                        })
                    }
                })
            },

            // 取消
            close() {
                this.modal = false
                // 楼层选择禁用
                // this.isDisabled = true
            },

            // 删除区域
            deleteAreaByid(regionid) {
                axios.ajax_post('admin-region-ajax_del_region', {
                    regionid
                }).then(res => {
                    if (res.data.code === 1) {
                        this.$Notice.success({
                            title: '删除成功',
                            duration: 3
                        })
                        this.getArea()
                    } else {
                        this.$Notice.error({
                            title: res.data.msg,
                            duration: 3
                        })
                    }
                })
            },

            getListByPageSize(rows) {
                this.search.rows = rows
                this.getArea()
            },

            getListByPageNum(page) {
                this.search.page = page
                this.getArea()
            },
        },
        computed: {
            cascadeList() {
                let list = JSON.parse(JSON.stringify(this.getBranchList()))
                list.forEach((item) => {
                    item.children.forEach((floor) => {
                        delete floor.children
                    })
                })
                list.unshift({
                    value: -1,
                    label: '全部'
                })
                this.cascadeList2 = this.getBranchList()
                return list
            },
            role() {
                return this.getRole()
            }
        },
        created() {
            if (Object.keys(this.$route.params).length === 2) {
                this.search.branchid = this.$route.params.branchid
                this.search.floorid = this.$route.params.floorid
                this.cascadeArr = [this.$route.params.branchid, this.$route.params.floorid]
            }
            this.getArea()
        },
        activated() {
            if (Object.keys(this.$route.params).length === 2) {
                if (this.cascadeArr[0] != this.$route.params.branchid || this.cascadeArr[1] != this.$route.params.floorid) {
                    this.search.branchid = this.$route.params.branchid
                    this.search.floorid = this.$route.params.floorid
                    this.cascadeArr = [this.$route.params.branchid, this.$route.params.floorid]
                    this.getArea()
                }
            }
        }
    }
</script>
<style lang="less" scoped>
    .add {
        margin-right: 20px;
    }

    .search_div {
        .search_box {
            width: auto
        }
    }

    .modalFooter {
        display: flex;
        justify-content: flex-end;
    }

    .cascader {
        width: 218px;
    }

    .branchSelect {
        width: 15vw;
    }
</style>